<template>
  <!-- 左右布局 -->
  <div style="display: flex; flex-direction: row; height: 100%">
    <div style="display: flex; flex-direction: column; width: 80%">
      <relationship
        ref="relationshipRef"
        :queryParams="queryParams"
        @clickCamera="clickCamera($event)"
      ></relationship>
    </div>
    <div
      style="
        display: flex;
        flex-direction: column;
        width: 20%;
        margin-left: 3px;
        height: 700px;
      "
    >
      <el-card style="height: 100%;overflow-y: auto;">
        <el-descriptions
         direction="vertical"
          class="bordered-descriptions"
          :column="1"
          border
          title="图像显示"
        >
          <!-- <template slot="extra">
            <el-button style="padding: 3px 0" type="text" @click="handleDetail"
              >详情</el-button
            >
          </template> -->

          <!-- 基本信息 -->
          <el-descriptions-item label="品牌">
            {{ form.cameraBrand }}
          </el-descriptions-item>
          <el-descriptions-item label="IP">
            {{ form.cameraIp }}
          </el-descriptions-item>
          <el-descriptions-item label="端口">
            {{ form.cameraPort }}
          </el-descriptions-item>

          <!-- 位置信息 -->
          <el-divider content-position="left">位置信息</el-divider>
          <el-descriptions-item label="纬度">{{ form.cameraLat }}</el-descriptions-item>
          <el-descriptions-item label="经度">{{ form.cameraLon }}</el-descriptions-item>

          <!-- 安全信息 -->
          <el-divider content-position="left">安全信息</el-divider>
          <el-descriptions-item label="摄像头漏洞">
            {{ form.cameraLoophole }}
          </el-descriptions-item>
          <el-descriptions-item label="摄像头漏洞影响">
            {{ form.cameraEffect }}
          </el-descriptions-item>
          <el-descriptions-item label="脆弱点">{{ form.cameraFraPoint }}</el-descriptions-item>
          <el-descriptions-item label="危害等级">{{ form.cameraLevel }}</el-descriptions-item>

          <!-- 图片显示 -->
          <el-divider content-position="left">监控画面</el-divider>
          <el-descriptions-item>
            <el-image :src="`http://192.168.0.117:8080${form.jpgViewUrl}`" style="width: 300px; height:200px;"></el-image>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
  </div>
</template>
<script>
import relationship from "./components/relationshipNew.vue";

export default {
  name: "otherShow",
  components: {
    relationship,
  },
  data() {
    return {
      queryParams: {
        cameraIp: null,
        cameraArea: null,
        cameraPort: null,
      },
      form: {},
    };
  },

  methods: {
    clickCamera(info) {
      this.form = info
    },
    getListOutside(type, value) {
      if (type == 1) {
        this.queryParams.cameraIp = value;
      } else if (type == 2) {
        this.queryParams.cameraArea = value;
      } else if(type == 3){
        this.queryParams.cameraOrg = value;
      }else{
        this.queryParams = {
          cameraIp: null,
          cameraArea: null,
          cameraOrg: null,
        };
      }
      this.$refs.relationshipRef.queryData(this.queryParams);
    },
    handleDetail() {
      this.$router.push("/positionAnalysis/cameraManagementD");
    },
  },
};
</script>
<style scoped>
::v-deep .el-card {
  height: 700px;
}
</style>
